<template>
  <form @submit.prevent="submitForm">
    <div class="mb-4">
      <label for="name" class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
      <input
          type="text"
          id="name"
          v-model="form.name"
          class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
          placeholder="请输入您的姓名"
          required
      >
    </div>

    <div class="mb-4">
      <label for="email" class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
      <input
          type="email"
          id="email"
          v-model="form.email"
          class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
          placeholder="请输入您的邮箱"
          required
      >
    </div>

    <div class="mb-4">
      <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">主题</label>
      <input
          type="text"
          id="subject"
          v-model="form.subject"
          class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
          placeholder="请输入消息主题"
          required
      >
    </div>

    <div class="mb-4">
      <label for="message" class="block text-sm font-medium text-gray-700 mb-1">消息</label>
      <textarea
          id="message"
          v-model="form.message"
          rows="4"
          class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
          placeholder="请输入您的消息"
          required
      ></textarea>
    </div>

    <button
        type="submit"
        class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition-colors flex items-center justify-center"
        :disabled="submitting"
    >
      <span v-if="!submitting">发送消息</span>
      <span v-else>
        <i class="fa fa-spinner fa-spin mr-2"></i>
        发送中...
      </span>
    </button>
  </form>
</template>

<script>
export default {
  emits: ['submit'],
  data() {
    return {
      form: {
        name: '',
        email: '',
        subject: '',
        message: ''
      },
      submitting: false
    }
  },
  methods: {
    submitForm() {
      this.submitting = true

      // 模拟表单提交
      setTimeout(() => {
        this.$emit('submit', this.form)

        // 重置表单
        this.form = {
          name: '',
          email: '',
          subject: '',
          message: ''
        }

        this.submitting = false
      }, 1500)
    }
  }
}
</script>